<template>
  <div class="shop" v-loading="loading">
    <!-- <el-button type="primary" v-if="s_status == 1" @click="onLook">查看合同</el-button> -->
    <el-table :data="tableDataDetail" style="width: 100%;margin-bottom: 20px;" border>
      <el-table-column label="合同编号" align="center" prop="factory_contract_no"></el-table-column>
      <el-table-column label="工厂" align="center" prop="factory_name"></el-table-column>
      <el-table-column label="合同金额" align="center" prop="contract_amount"></el-table-column>
      <el-table-column label="总件数" align="center" prop="totalnum"></el-table-column>
      <el-table-column label="预付款" align="center" prop="advance_amount">
        <template slot-scope="{ row }">
          <el-link
            target="_blank"
            type="primary"
            :disabled="row.advance_amount <= 0"
            @click="onDetailList(row.factory_contract_no, 0)"
          >{{ row.advance_amount }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="违约金/赔偿金" align="center" prop="fine_amount">
        <template slot-scope="{ row }">
          <el-link
            target="_blank"
            type="primary"
            :disabled="row.fine_amount <= 0"
            @click="onDetailList(row.factory_contract_no, 1)"
          >{{ row.fine_amount }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="额外费用" align="center" prop="additional_amount">
        <template slot-scope="{ row }">
          <el-link
            target="_blank"
            type="primary"
            :disabled="row.additional_amount <= 0"
            @click="onDetailList(row.factory_contract_no, 2)"
          >{{ row.additional_amount }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="工序加工费" align="center" prop="work_amount">
        <template slot-scope="{ row }">
          <el-link
            target="_blank"
            type="primary"
            :disabled="row.work_amount <= 0"
            @click="onDetailList(row.factory_contract_no, 3)"
          >{{ row.work_amount }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="生成时间" align="center" prop="contract_time"></el-table-column>
      <el-table-column label="理单员" align="center" prop="order_processor"></el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="{ row }">
          <div
            :style="{
              color: row.status == 3 || row.status == 4 ? 'red' : row.status == 2 ? '#67C23A' : '',
            }"
          >
            {{
              row.status == 0
                ? "未提交"
                : row.status == 1
                  ? "待审核"
                  : row.status == 2
                    ? "已通过"
                    : row.status == 3
                      ? "未通过"
                      : row.status == 4
                        ? "已作废"
                        : ""
            }}
          </div>
          <!-- <el-button type="text" @click="onLookContract(row.fileid)" v-if="row.s_status == 1 && row.status == 2">查看合同附件</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-table :data="shopList" style="width: 100%" border>
      <el-table-column label="款号" align="center" prop="type_no"></el-table-column>
      <el-table-column label="款名" align="center" prop="type_name"></el-table-column>
      <el-table-column label="成品加工单" align="center" prop="processing_code"></el-table-column>
      <el-table-column label="聚水潭采购单号" align="center" prop="po_id"></el-table-column>
      <el-table-column label="巨益采购单号" align="center" prop="jy_number"></el-table-column>
      <el-table-column label="大货核价编码" align="center" prop="verify_price_number"></el-table-column>
      <el-table-column label="运营下单时间" align="center" prop="add_date"></el-table-column>
      <el-table-column label="单价" align="center" prop="unit_price"></el-table-column>
      <el-table-column label="件数" align="center" prop="countnum"></el-table-column>
      <el-table-column label="总金额" align="center" prop="countprice"></el-table-column>
    </el-table>
    <pagination
      :form="form"
      :total="total"
      @paginationPostOrderTaskList="postAdminPricingLookPricingContract"
    />
  </div>
</template>

<script>
import { postAdminPricingLookPricingContract, } from "@/api";
import pagination from "@/components/pagination.vue";
export default {
  components: { pagination },
  data() {
    return {
      loading: true,
      s_status: 0,
      factory_contract_no: "",
      contract_url: "",
      tableDataDetail: [],
      form: {
        id: "",
        page: 1,
        size: 10,
      },
      total: 1,
      shopList: [],
    };
  },
  async activated() {
    let id = this.$route.query.id
    if (id) {
      this.form.id = id
      await this.postAdminPricingLookPricingContract();
      this.loading = false
    }
  },
  methods: {
    //门店列表
    async postAdminPricingLookPricingContract() {

      await postAdminPricingLookPricingContract(this.form).then((res) => {
        console.log("门店列表", res);
        let data = res.data
        this.shopList = data.list;
        this.factory_contract_no = data.factory_contract_no
        this.contract_url = data.contract_url
        this.total = res.total
        this.s_status = res.data.s_status
        let arr = [
          {
            factory_contract_no: data.factory_contract_no,
            factory_name: data.factory_name,
            contract_amount: data.contract_amount,
            advance_amount: data.advance_amount,
            fine_amount: data.fine_amount,
            additional_amount: data.additional_amount,
            work_amount: data.work_amount,
            order_processor: data.order_processor,
            status: data.status,
            contract_time: data.contract_time,
            totalnum: data.totalnum
          }
        ]
        this.tableDataDetail = arr
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.shop {
  @include global-back;
}
.myform {
  display: flex;
  justify-content: space-between;
}
</style>
